<title>文件上传</title>

<link rel="stylesheet" href="/vendor/blueimp-file-upload/jquery.fileupload.css">
<link rel="stylesheet" href="/vendor/dropify/dropify.css">

<div class="page animation-fade page-forms">
    <div class="page-header">
        <h1 class="page-title">文件上传</h1>
        <ol class="breadcrumb">
            <li>
                <a>首页</a>
            </li>
            <li>
                <a href="javascript:;">表单</a>
            </li>
            <li class="active">文件上传</li>
        </ol>
    </div>
    <div class="page-content">

        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">Dropify
                    <small>
                        <a class="example-plugin-link" href="https://jeremyfagis.github.io/dropify/" target="_blank">
                            官网
                        </a>
                    </small>
                </h3>
            </div>
            <div class="panel-body container-fluid">
                <div class="row row-lg">
                    <div class="col-lg-4 col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">默认</h4>
                            <div class="example">
                                <input type="file" class="form-control" id="input-file-now" data-plugin="dropify" data-default-file="">
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-4 col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">设置默认值</h4>
                            <div class="example">
                                <input type="file" class="form-control" id="input-file-now-custom-1" data-plugin="dropify" data-default-file="/images/placeholder.png">
                            </div>
                        </div>

                    </div>
                    <div class="clearfix visible-sm-block visible-md-block"></div>
                    <div class="col-lg-4 col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">设置高度</h4>
                            <div class="example">
                                <input type="file" class="form-control" id="input-file-now-custom-2" data-plugin="dropify" data-height="500">
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-4 col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">多个设置项</h4>
                            <div class="example">
                                <input type="file" class="form-control" id="input-file-now-custom-3" data-plugin="dropify" data-height="500" data-default-file="/images/placeholder.png">
                            </div>
                        </div>

                    </div>
                    <div class="clearfix visible-sm-block visible-md-block"></div>
                    <div class="col-lg-4 col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">禁用</h4>
                            <div class="example">
                                <input type="file" class="form-control" id="input-file-now-disabled-1" data-plugin="dropify" disabled="disabled">
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-4 col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">默认文件</h4>
                            <div class="example">
                                <input type="file" class="form-control" id="input-file-now-disabled-2" data-plugin="dropify" disabled="disabled" data-default-file="/images/placeholder.png">
                            </div>
                        </div>

                    </div>
                    <div class="clearfix visible-sm-block visible-md-block"></div>
                    <div class="col-lg-4 col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">文件大小限制</h4>
                            <div class="example">
                                <input type="file" class="form-control" id="input-file-max-fs" data-plugin="dropify" data-max-file-size="2M">
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-4 col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">禁用移除按钮</h4>
                            <div class="example">
                                <input type="file" class="form-control" id="input-file-disable-remove" data-plugin="dropify" data-disable-remove="true">
                            </div>
                        </div>

                    </div>
                    <div class="clearfix visible-sm-block visible-md-block"></div>
                    <div class="col-lg-4 col-sm-6">

                        <div class="example-wrap">
                            <h4 class="example-title">事件</h4>
                            <div class="example">
                                <input type="file" class="form-control" id="input-file-events" class="dropify-event" data-default-file="/images/placeholder.png">
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="example-wrap">
            <h3 class="example-title">jQuery File Upload
                <small>
                    <a class="example-plugin-link" href="https://blueimp.github.io/jQuery-File-Upload/" target="_blank">
                        官网
                    </a>
                </small>
            </h3>
            <form class="upload-form" id="exampleUploadForm" method="POST">
                <input type="file" id="inputUpload" name="files[]" multiple="">
                <div class="uploader-inline">
                    <h4 class="upload-instructions">单击或直接拖动需要上传的文件到此处</h4>
                </div>
                <div class="file-wrap container-fluid">
                    <div class="file-list row"></div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="/vendor/jquery-ui/jquery-ui.min.js" data-name="jquery-ui"></script>
<script src="/vendor/blueimp-tmpl/tmpl.min.js"></script>
<script src="/vendor/blueimp-canvas-to-blob/canvas-to-blob.min.js"></script>
<script src="/vendor/blueimp-load-image/load-image.all.min.js"></script>
<script src="/vendor/blueimp-file-upload/jquery.fileupload.js" data-name="fileupload" data-deps="jquery-ui"></script>
<script src="/vendor/blueimp-file-upload/jquery.fileupload-process.js" data-name="fileupload-process" data-deps="fileupload"></script>
<script src="/vendor/blueimp-file-upload/jquery.fileupload-image.js" data-deps="fileupload,fileupload-process"></script>
<script src="/vendor/blueimp-file-upload/jquery.fileupload-audio.js" data-deps="fileupload"></script>
<script src="/vendor/blueimp-file-upload/jquery.fileupload-video.js" data-deps="fileupload"></script>
<script src="/vendor/blueimp-file-upload/jquery.fileupload-validate.js" data-deps="fileupload"></script>
<script src="/vendor/blueimp-file-upload/jquery.fileupload-ui.js" data-deps="fileupload"></script>
<script src="/vendor/dropify/dropify.min.js"></script>
<script src="/js/examples/forms/dropify.js" data-deps="fileupload"></script>